<template>
    <div>
        <a href="https://blog.csdn.net/damys/article/details/51655040">HTML5---Canvas-模拟9星球运行轨道</a>
        <canvas id="canvas" width="1000" height="1000" style="background:#000" ref="myCanvas">
            您的浏览器不支持canvas标签
        </canvas>
    </div>
</template>

<script>
    export default {
        name: "index",
        data(){
            return {
                canvas: null,
                cxt: null,
                sun: null,
                water: null,
                gold: null,
                diqiu: null,
                fire: null,
                wood: null,
                soil: null,
                god:null,
                sea: null
            }
        },
        mounted() {
            console.log(this.Star)
            this.initCanvas()
            //使个星球进行运动
            this.initStars()
            setInterval(this.move,10);
        },
        methods: {
            initCanvas() {
                console.log("初始化canvas")
                this.canvas = this.$refs.myCanvas;
                this.cxt = this.canvas.getContext('2d');
            },
            initStars() {
                //创建太阳对象实例
                this.sun = new this.Sun();
                this.water = new this.Mercury();
                this.gold = new this.Venus();
                this.diqiu = new this.Earth();
                this.fire = new this.Mars();
                this.wood = new this.Jupiter();
                this.soil = new this.Saturn();
                this.god = new this.Uranus();
                this.sea = new this.Neptune();
            },


            //轨道
            drawTrack() {
                for (var i = 0; i < 8; i++) {
                    this.cxt.beginPath();
                    this.cxt.arc(500, 500, (i + 1) * 50, 0, Math.PI * 360, false);
                    this.cxt.closePath();
                    //设置笔触的颜色
                    this.cxt.strokeStyle = "#fff";
                    this.cxt.stroke();
                }

            },


            //星球--画出星球需要哪些属性
            Star(x, y, radius, cycle, sColor, eColor) {
                this.x = x;   //星球的坐标点
                this.y = y;
                this.radius = radius;//星球的半径
                this.cycle = cycle;//公转周期
                this.sColor = sColor;//星球的颜色(开始色,结束色)
                this.eColor = eColor;
                this.color = null;//新建一个渐变颜色空对象

                this.time = 0;//设置一个计时器

                this.draw = function () {
                    this.cxt.save();//保存之前的画布内容
                    this.cxt.translate(500, 500);//重置0,0坐标点
                    this.cxt.rotate(this.time * (360 / this.cycle) * Math.PI / 180);//设置旋转角度
                    this.cxt.beginPath();//画星球
                    this.cxt.arc(this.x, this.y, this.radius, 0, 360, false);
                    this.cxt.closePath();
                    this.color = this.cxt.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.radius);
                    this.color.addColorStop(0, this.sColor); //渐变开始点和颜色
                    this.color.addColorStop(1, this.eColor); //渐变结束点和颜色
                    this.cxt.fillStyle = this.color;   //将渐变对象复制给填充画笔
                    this.cxt.fill();
                    this.cxt.restore();  //恢复之前保存的画布内容
                    this.time += 1;//执行完毕之后时间增加
                }
            },

            //创建一个太阳对象的构造函数
            Sun() {
                this.Star.call(this.sun, 0, 0, 20, 0, "#F00", "#f90")
            },

            //水星
            Mercury() {
                this.Star.call(this.water, 0, -50, 10, 87.70, "#A69697", "#5C3E40")
            },

            //金星
            Venus() {
                this.Star.call(this.gold, 0, -100, 10, 224.701, "#C4BBAC", "#1F1315")
            },

            //地球
            Earth() {
                this.Star.call(this.diqiu, 0, -150, 10, 365.224, "#78B1E8", "#050C12")
            },

            //火星
            Mars() {
                this.Star.call(this.fire, 0, -200, 10, 686.98, "#CEC9B6", "#76422D")
            },

            //木星
            Jupiter() {
                this.Star.call(this.wood, 0, -250, 10, 4332.589, "#C0A48E", "#322222")
            },

            //土星
            Saturn() {
                this.Star.call(this.soil, 0, -300, 10, 10759.5, "#F7F9E3", "#5C4533")
            },

            //天王星
            Uranus() {
                this.Star.call(this.god, 0, -350, 10, 30799.095, "#A7E1E5", "#19243A")
            },

            //海王星
            Neptune() {
                this.Star.call(this.sea, 0, -400, 10, 60152, "#0661B2", "#1E3B73")
            },


            move() {
                this.cxt.clearRect(0, 0, 1000, 1000); //清除画布
                this.drawTrack();    //画出轨道

                this.sun.draw();     //调用-画出每个星球
                this.water.draw();
                this.gold.draw();
                this.diqiu.draw();
                this.fire.draw();
                this.wood.draw();
                this.soil.draw();
                this.god.draw();
                this.sea.draw();
            },

        }


    }
</script>

<style scoped>

</style>

<!--
星球  英文名     公转周期         光色     暗色
水星  Mercury     87.70 天     #A69697 #5C3E40
金星  Venus       224.701天    #C4BBAC #1F1315
地球  Earth       365.2422天   #78B1E8 #050C12
火星  Mars        686.98 日    #CEC9B6 #76422D
木星  Jupiter     4332.589天   #C0A48E #322222
土星  Saturn      10759.5 天   #F7F9E3 #5C4533
天王星 Uranus      30799.095日  #A7E1E5 #19243A
海王星 Neptune     164.8*365天  #0661B2 #1E3B73
-->

